<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能天车</title>
    <script src="js/jquery-1.12.3.min.js"></script>
    <script src="js/underscore-min.js"></script>
    <script src="js/mqttws31.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/demo1.js"></script>
</head>
<body>
<div id="auto_crane">

    <table>
        <tr>
            <td>命令</td>
            <td>天车</td>
            <td>源库区</td>
            <td>源坐标</td>
            <td>目标库区</td>
            <td>目标坐标</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>
                <select id="action">
                    <option value="from_a_to_b">将钢卷从A夹起,放到B</option>
                    <option value="to_b">天车a从现在的位置,移动到B</option>
                    <option value="from_a_move_to_b">天车a吊起A钢卷,移动到B</option>
                    <option value="put_down">天车a放下钢卷</option>
                    <option value="stop">天车a停车</option>
                    <option value="auto_10_same_billet">随机添加10个钢卷相同种类的同型号钢卷</option>
                    <option value="auto_10_billet">随机添加10个钢卷包含两种不同的型号钢卷</option>
                </select>
            </td>
            <td>
                <select id="crane">
                    <option value="">不指定天车</option>
                    <option value="crane1a">天车1a</option>
                    <option value="crane1b">天车1b</option>
                    <option value="crane2a">天车2a</option>
                    <option value="crane2b">天车2b</option>
                    <option value="crane3a">天车3a</option>
                    <option value="crane3b">天车3b</option>
                </select>
            </td>
            <td>
                <select id="source_area">
                    <option value="area1">库区1</option>
                    <option value="area2">库区2</option>
                    <option value="area3">库区3</option>
                </select>
            </td>
            <td>
                <input id="source_x" value="0">
                <input id="source_y" value="0">
                <input id="source_z" value="0">
            </td>
            <td>
                <select id="aim_area">
                    <option value="area1">库区1</option>
                    <option value="area2">库区2</option>
                    <option value="area3">库区3</option>
                </select>
            </td>
            <td>
                <input id="aim_x" value="0">
                <input id="aim_y" value="0">
                <input id="aim_z" value="0">
            </td>
            <td>
                <button id="add_command" @click="do_action">添加命令</button>
            </td>
        </tr>

    </table>

    <table width="100%">
        <tr>
            <td colspan="8">
                命令
            </td>
        </tr>
        <tr>
            <td>id</td>
            <td>命令</td>
            <td>天车</td>
            <td>源库区</td>
            <td>源坐标</td>
            <td>目标库区</td>
            <td>目标坐标</td>
            <td>子命令</td>
        </tr>
        <tr v-for="command in all_object.actions">
            <td>
                {{command.command_id}}
            </td>
            <td>
                <span v-if="command.action=='from_a_to_b'">将钢卷从A夹起,放到B</span>
                <span v-if="command.action=='to_b'">天车a从现在的位置,移动到B</span>
                <span v-if="command.action=='from_a_move_to_b'">天车a吊起A钢卷,移动到B</span>
                <span v-if="command.action=='put_down'">天车a放下钢卷</span>
                <span v-if="command.action=='stop'">天车a停车</span>
                <span v-if="command.action=='auto_10_same_billet'">随机添加10个钢卷相同种类的同型号钢卷</span>
                <span v-if="command.action=='auto_10_billet'">随机添加10个钢卷包含两种不同的型号钢卷</span>

            </td>
            <td>
                <span>{{command.crane}}</span>
            </td>
            <td>
                <span>{{command.source_area}}</span>
            </td>
            <td>
                <span>{{command.source_pos}}</span>
            </td>
            <td>
                <span>{{command.aim_area}}</span>
            </td>
            <td>
                <span>{{command.aim_pos}}</span>
            </td>
            <td>
                <table>
                    <tr>
                        <td>命令</td>
                        <td>状态</td>
                    </tr>
                    <tr v-for="sub_command in command.sub_commands">
                        <td>{{sub_command.text}}</td>
                        <td>
                            <span>{{sub_command.status}}</span>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

    </table>

    <table width="100%">
        <tr>
            <td colspan="8">
                命令
            </td>
        </tr>
        <tr>
            <td>id</td>
            <td>命令</td>
            <td>天车</td>
            <td>源库区</td>
            <td>源坐标</td>
            <td>目标库区</td>
            <td>目标坐标</td>
            <td>子命令</td>
        </tr>
        <tr v-for="crane in all_object.crane">
            <td>
                {{command.command_id}}
            </td>
            <td>
                <span v-if="command.action=='from_a_to_b'">将钢卷从A夹起,放到B</span>
                <span v-if="command.action=='to_b'">天车a从现在的位置,移动到B</span>
                <span v-if="command.action=='from_a_move_to_b'">天车a吊起A钢卷,移动到B</span>
                <span v-if="command.action=='put_down'">天车a放下钢卷</span>
                <span v-if="command.action=='stop'">天车a停车</span>
                <span v-if="command.action=='auto_10_same_billet'">随机添加10个钢卷相同种类的同型号钢卷</span>
                <span v-if="command.action=='auto_10_billet'">随机添加10个钢卷包含两种不同的型号钢卷</span>

            </td>
            <td>
                <span>{{command.crane}}</span>
            </td>
            <td>
                <span>{{command.source_area}}</span>
            </td>
            <td>
                <span>{{command.source_pos}}</span>
            </td>
            <td>
                <span>{{command.aim_area}}</span>
            </td>
            <td>
                <span>{{command.aim_pos}}</span>
            </td>
            <td>
                <table>
                    <tr>
                        <td>命令</td>
                        <td>状态</td>
                    </tr>
                    <tr v-for="sub_command in command.sub_commands">
                        <td>{{sub_command.text}}</td>
                        <td>
                            <span>{{sub_command.status}}</span>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

    </table>

</div>
</body>
</html>